<template>
	<div id="PlainDetail">
		<x-header :left-options="{showBack: false}" title="投诉记录" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="wrap">
			<div class="title-bar">
				<p>
					<span>投诉原因</span>
					<b>{{auction_plaint.plaint_cause}}</b>
					<i>待处理</i>
				</p>
			</div>
			<div class="infoWrap">
				<img v-if="auction_plaint.goods.goods_thumb.indexOf('/uploads') == 0" :src="'/los/uploads/thumb/goods/' + auction_plaint.goods.goods_id + '_98X98.jpeg'" alt="" />
				<img v-else :src="auction_plaint.goods.goods_thumb" />
				<div class="desc">
					<span>{{auction_plaint.goods_name}}</span>
					<p v-html="auction_plaint.goods.goods_content">{{auction_plaint.goods.goods_content}}</p>
				</div>
				<p class="timer">{{auction_plaint.add_time}}</p>
			</div>
		</div>
		<div class="progress">
			<div class="title-bar">
				<p>
					<span>处理进程</span>
					<i>待处理</i>
				</p>
			</div>
			<div class="content">
				<div class="top">
					<div class="custom">
						<span>用户</span><i></i>
					</div>
					<div class="desc">
						<p>{{auction_plaint.plaint_content}}</p>
						<ul v-if="auction_plaint.plaint_imgs != ''">
							<li v-for="goods_thumb in plaint_imgs">
								<img v-if="goods_thumb.indexOf('/uploads') == 0" :src="'/los' + goods_thumb" alt="" />
								<img v-else :src="goods_thumb" />
							</li>

						</ul>
						<p class="timer">{{auction_plaint.add_time}}</p>
					</div>
				</div>
				<div class="down">
					<div class="custom">
						<span>客服</span><i></i>
					</div>
					<div class="reply">您好,您投诉的内容平台已经对其进行了考核与审核,我们会进快对其进行处理</div>
					<p class="timer">{{auction_plaint.add_time}}</p>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader } from "vux";
	export default {
		data() {
			return {
				auction_plaint: '',
				plaint_imgs: []
			}
		},
		components: {
			XHeader,
		},
		activated() {
			this.getGoodsDetail();
		},
		methods: {
			//获取商品信息
			getGoodsDetail: function() {
				let plaint_id = this.$route.params.plaint_id;
				this.$http({
					method: 'GET',
					url: '/los/api/auction/plaint.json?plaint_id=' + plaint_id,
					data: ''
				}).then((result) => {
					this.auction_plaint = result.data.auction_plaint;
					this.plaint_imgs = this.auction_plaint.plaint_imgs.split(",");
					console.log(this.plaint_imgs);
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#Complain {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	#Complain .no-data {
		width: 5.86666rem;
		margin: 0 auto;
		margin-top: 1.6rem;
	}
	
	#Complain .no-data img {
		width: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.wrap {
		background: #fff;
		margin-top: 0.26rem;
	}
	
	.title-bar {
		line-height: 1.17rem;
		height: 1.17rem;
		position: relative;
		padding: 0 0.26rem;
	}
	
	.title-bar p {
		height: 100%;
		width: 100%;
		font-size: 0.4rem;
		overflow: hidden;
		color: #777;
	}
	
	.title-bar:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.17rem;
		right: 0;
		height: 1px;
		width: 96%;
		margin: 0 auto;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.title-bar p span {
		color: #777;
	}
	
	.title-bar p b {
		margin-left: 0.61rem;
		font-weight: normal;
		color: #333;
	}
	
	.title-bar p i {
		float: right;
		font-style: normal;
	}
	
	.infoWrap {
		width: 100%;
		background: #fff;
		overflow: hidden;
		padding: 0.26rem;
		margin-bottom: 0.26rem;
	}
	
	.infoWrap img {
		float: left;
		width: 2.37rem;
		height: 2.37rem;
		border-radius: 0.1rem;
	}
	
	.infoWrap .desc {
		float: right;
		margin-left: 0.26rem;
		width: 72%;
		overflow: hidden;
	}
	
	.infoWrap .desc span {
		display: block;
		line-height: 0.58rem;
		font-size: 0.34rem;
		color: #777;
	}
	
	.infoWrap .desc p {
		margin-top: 0.26rem;
		line-height: 0.5rem;
		height: 1rem;
		overflow: hidden;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.infoWrap .timer {
		float: right;
		font-size: 0.32rem;
		color: #aaa;
		margin-top: 0.13rem;
		margin-right: 0.1rem;
	}
	
	.progress {
		background: #fff;
		margin-top: 0.26rem;
	}
	
	.progress .content {
		padding: 0.46rem 0.26rem;
		overflow: hidden;
	}
	
	.progress .content .top {
		height: 4.2rem;
	}
	
	.progress .content .custom {
		float: left;
		width: 1.86rem;
	}
	
	.progress .content .custom span {
		width: 1.04rem;
		height: 0.45rem;
		display: inline-block;
		background: #d24545;
		color: #fff;
		border-radius: 0.05rem;
		text-align: center;
		padding-top: 0.05rem;
	}
	
	.progress .content .down .custom span {
		background: #45d29b;
	}
	
	.progress .content .custom i {
		width: 0.21rem;
		height: 0.21rem;
		background: #2bc741;
		display: inline-block;
		border-radius: 50%;
		margin-left: 0.37rem;
	}
	
	.progress .content .desc {
		float: right;
		width: 80%;
	}
	
	.progress .content .desc p {
		font-size: 0.37rem;
		line-height: 0.5rem;
		margin-bottom: 0.32rem;
	}
	
	.progress .content .desc ul {
		overflow: hidden;
	}
	
	.progress .content .desc ul li {
		float: left;
		width: 2.34rem;
		height: 2.34rem;
		margin-right: 0.18rem;
	}
	
	.progress .content .desc ul li:last-child {
		margin-right: 0;
	}
	
	.progress .content .desc ul li img {
		width: 100%;
		height: 100%;
	}
	
	.progress .content .desc .timer {
		color: #aaa;
		margin-top: 0.26rem;
	}
	
	.progress .content .down .reply {
		font-size: 0.37rem;
		float: right;
		width: 80%;
	}
	
	.progress .content .down .timer {
		float: right;
		width: 80%;
		text-align: left;
		color: #aaa;
		margin-top: 0.26rem;
		font-size: 0.37rem;
	}
</style>